<template>
  <view class="page">
    <view class="tabs">
      <view v-for="(item, index) in tab.list" :key="index" class="tab" :class="{active: index === tab.current}"
        @click="change(index)">{{item.name}}</view>
    </view>
    <scroll-view class="scroll-list" scroll-y="true" scroll-with-animation="true">
      <template v-if="tab.current === 0">
        <u-form ref="uForm" class="form" :model="model" :rules="rules" label-position="left">
          <u-form-item label="学院" prop="stayRemark" label-width="180" required>
            <u-input type="input" placeholder="请输入学院" v-model="model.deptName" :disabled="true" />
          </u-form-item>
          <u-form-item label="用户姓名" prop="realName" label-width="180" required>
            {{model.realName}}({{model.account}})
          </u-form-item>
          <u-form-item label="谈话次数" prop="talkCnt" label-width="180" required>
            {{model.talkCnt}}
          </u-form-item>
          <u-form-item label="住宿" prop="stay" label-width="180" required>
            <js-radio v-model="model.stay" dict-type="mis_stay_type" itemLabel="dictValue" itemValue="dictKey"
              :disabled="disabled"></js-radio>
          </u-form-item>
          <u-form-item label="区县" prop="stayCode" label-width="150" required
            v-if="model.stay!==null && model.stay!==''&& model.stay!=='1'">
            <view class="u-demo-result-line">{{ stayPopup.selectedLabel ? stayPopup.selectedLabel : '未选择' }}
            </view>
            <js-city-select v-if="stayPopup.show" v-model="stayPopup.show" @city-change="stayPopupChange"
              :areaCode="stayPopup.areaCode"></js-city-select>
            <u-button slot="right" type="primary" size="mini" @click="stayPopup.show = true"
              :disabled="disabled">选择</u-button>
          </u-form-item>
          <u-form-item label="住宿说明" prop="stayRemark" label-width="180" required v-if="model.stay==='1'">
            <u-input type="input" placeholder="请填写宿舍号，如：和园C1-111" v-model="model.stayRemark" :disabled="disabled" />
          </u-form-item>
          <u-form-item label="详细地址" prop="stayRemark" label-width="180" required v-else>
            <u-input type="input" placeholder="请填写乡镇街道及社区(村)详细地址" v-model="model.stayRemark" :disabled="disabled" />
          </u-form-item>
          <u-form-item label="父母信息" prop="parentType" label-width="180" required>
            <js-radio v-model="model.parentType" dict-type="mis_parent_type" itemLabel="dictValue" itemValue="dictKey"
              :disabled="disabled"></js-radio>
          </u-form-item>
          <u-form-item label="家庭经济情况" prop="familyType" label-width="180" required>
            <js-radio v-model="model.familyType" dict-type="mis_family_type" itemLabel="dictValue" itemValue="dictKey"
              :disabled="disabled"></js-radio>
          </u-form-item>
          <u-form-item label="心理健康状况" prop="heartType" label-width="180" required>
            <js-radio v-model="model.heartType" dict-type="mis_heart_type" itemLabel="dictValue" itemValue="dictKey"
              :disabled="disabled"></js-radio>
          </u-form-item>
          <u-form-item label="政治面貌" prop="punishType" label-width="180" required>
            <js-radio v-model="model.punishType" dict-type="mis_punish_type" itemLabel="dictValue" itemValue="dictKey"
              :disabled="disabled"></js-radio>
          </u-form-item>
          <u-form-item label="学生补考情况" prop="makeUpExam" label-width="180" required>
            <js-radio v-model="model.makeUpExam" dict-type="mis_make_up_exam" itemLabel="dictValue" itemValue="dictKey"
              :disabled="disabled"></js-radio>
          </u-form-item>
          <u-form-item label="身体健康状况" prop="healthType" label-width="180" required>
            <js-radio v-model="model.healthType" dict-type="mis_health_type" itemLabel="dictValue" itemValue="dictKey"
              :disabled="disabled"></js-radio>
          </u-form-item>
          <u-form-item label="是否必谈对象" prop="isNeedTalk" label-width="180" required>
            <js-radio v-model="model.isNeedTalk" dict-type="yes_no" dataSource="dict" itemLabel="dictValue"
              itemValue="dictKey" :disabled="disabled"></js-radio>
          </u-form-item>
          <u-form-item label="民族" prop="nation" label-width="180" required>
            <js-select v-model="model.nation" dict-type="nation" itemLabel="dictValue" itemValue="dictKey"
              placeholder="请选择民族" :disabled="disabled"></js-select>
          </u-form-item>
          <u-form-item label="电话" prop="phone" label-width="180" required>
            <u-input type="input" placeholder="请输入电话" v-model="model.phone" :disabled="disabled" />
          </u-form-item>
          <u-form-item label="籍贯" prop="nativePlaceCode" label-width="150" required>
            <view class="u-demo-result-line">{{ cityPopup.selectedLabel ? cityPopup.selectedLabel : '未选择' }}
            </view>
            <js-city-select v-if="cityPopup.show" v-model="cityPopup.show" @city-change="cityPopupChange"
              :areaCode="cityPopup.areaCode"></js-city-select>
            <u-button slot="right" type="primary" size="mini" @click="cityPopup.show = true"
              :disabled="disabled">选择</u-button>
          </u-form-item>
          <u-form-item label="备注" prop="remark" label-width="180">
            <u-input type="textarea" placeholder="请输入备注" v-model="model.remark" :disabled="disabled" />
          </u-form-item>
        </u-form>
        <view v-if="!disabled" class="footer">
          <view class="form-button primary" @click="submit">保存</view>
          <view class="form-button" @click="cancel">取消</view>
        </view>
      </template>
      
      <template v-if="tab.current === 1">
        <u-form class="form" :model="model" :rules="rules" ref="uForm" label-position="left">
          <u-form-item label="学院" prop="stayRemark" label-width="180" required>
            <u-input type="input" placeholder="请输入学院" v-model="model.deptName" :disabled="true" />
          </u-form-item>
          <u-form-item label="用户类型" prop="personTypeName" label-width="180" required>
            <u-input type="input" placeholder="请输入用户类型" v-model="model.personTypeName" :disabled="true" />
          </u-form-item>
          <u-form-item label="登录账号" prop="account" label-width="180" required>
            <u-input type="input" placeholder="请输入登录账号" v-model="model.account" :disabled="true" />
          </u-form-item>
          <u-form-item label="用户姓名" prop="realName" label-width="180" required>
            <u-input type="input" placeholder="请输入用户姓名" v-model="model.realName" :disabled="true" />
          </u-form-item>
          <u-form-item label="专业" prop="zyName" label-width="180" required>
            <u-input type="input" placeholder="请输入专业" v-model="model.zyName" :disabled="true" />
          </u-form-item>
          <u-form-item label="班级" prop="bjName" label-width="180" required>
            <u-input type="input" placeholder="请输入班级" v-model="model.bjName" :disabled="true" />
          </u-form-item>
          <u-form-item label="年级" prop="xznj" label-width="180" required>
            <u-input type="input" placeholder="请输入年级" v-model="model.xznj" :disabled="true" />
          </u-form-item>
          <u-form-item label="性别" prop="sexName" label-width="180" required>
            <u-input type="input" placeholder="请输入性别" v-model="model.sexName" :disabled="true" />
          </u-form-item>
        </u-form>
      </template>
    </scroll-view>
    <u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
  </view>
</template>

<script>
  import JsPopup from '@/components/js-popup/js-popup.vue'
  import {
    validatenull
  } from '@/common/validate.js'
  import {
    selectDictValue
  } from '@/common/dict.js'
  import JsCitySelect from '@/components/js-city-select/js-city-select.vue';
  export default {
    components: {
      JsPopup,
      JsCitySelect
    },
    data() {
      return {
        model: {
          id: '',
          account: '',
          realName: '',
          deptName: '',
          talkCnt: '',
          stay: null,
          stayRemark: '',
          parentType: null,
          familyType: null,
          heartType: null,
          punishType: null,
          makeUpExam: null,
          healthType: null,
          isNeedTalk: null,
          nation: '',
          phone: '',
          stayCode: '',
          city: '',
          district: '',
          remark: '',
          nativePlace: '',
          nativePlaceCode: ''
        },
        disabled: false,
        showClose: false,
        isLoaded: false,
        params: {
          year: true,
          month: true,
          day: true,
          hour: true,
          minute: true,
          second: true
        },
        popup: {
          isVisible: false,
          mode: "bottom",
          multiple: false,
        },
        tab: {
          list: [{
            name: '补充信息'
          }, {
            name: '基本信息'
          }],
          current: 0
        },
        talkStyle: 'display: block;',
        rateStyle: 'display: none;margin:10rpx;',
        pickerShow: false,
        cityPopup: {
          show: false,
          selectedLabel: '',
          areaCode: [],
          defaultRegion: []
        },
        stayPopup: {
          show: false,
          selectedLabel: '',
          areaCode: [],
          defaultRegion: []
        },
        rules: {
          stay: [{
            required: true,
            message: '请选择住宿',
            trigger: ['change', 'blur'],
          }],
          stayCode: [{
            required: true,
            message: '请选择区县',
            trigger: ['change', 'blur'],
          }],
          stayRemark: [{
            required: true,
            message: '请填写住宿说明',
            trigger: ['change', 'blur'],
          }],
          parentType: [{
            required: true,
            message: '请选择父母信息',
            trigger: ['change', 'blur'],
          }],
          familyType: [{
            required: true,
            message: '请选择家庭经济情况',
            trigger: ['change', 'blur'],
          }],
          heartType: [{
            required: true,
            message: '请选择心理健康状况',
            trigger: ['change', 'blur'],
          }],
          punishType: [{
            required: true,
            message: '请选择政治面貌',
            trigger: ['change', 'blur'],
          }],
          makeUpExam: [{
            required: true,
            message: '请选择学生补考情况',
            trigger: ['change', 'blur'],
          }],
          healthType: [{
            required: true,
            message: '请选择身体健康状况',
            trigger: ['change', 'blur'],
          }],
          isNeedTalk: [{
            required: true,
            message: '请选择是否必谈对象',
            trigger: ['change', 'blur'],
          }],
          nation: [{
            required: true,
            message: '请选择民族',
            trigger: ['change', 'blur'],
          }],
          phone: [{
            required: true,
            message: '请填写电话',
            trigger: ['change', 'blur'],
          }],
          nativePlaceCode: [{
            required: true,
            message: '请选择籍贯',
            trigger: ['change', 'blur'],
          }]
        },
      };
    },
    mounted() {

    },
    onLoad(params) {
      if (params.id) {
        this.$u.api.mis.misAssistantUserExt.detail({
          id: params.id
        }).then(res => {
          Object.assign(this.model, res.data);
          this.isLoaded = true;
          this.model.stay = this.model.stay.toString();
          this.model.parentType = this.model.parentType.toString();
          this.model.familyType = this.model.familyType.toString();
          this.model.heartType = this.model.heartType.toString();
          this.model.punishType = this.model.punishType.toString();
          this.model.makeUpExam = this.model.makeUpExam.toString();
          this.model.healthType = this.model.healthType.toString();
          this.model.isNeedTalk = this.model.isNeedTalk.toString();
          this.cityPopup.areaCode = this.model.nativePlaceCode.split('-');
          this.cityPopup.selectedLabel = this.model.nativePlace;
          if (this.model.stay === '2') {
            this.stayPopup.areaCode = this.model.stayCode.split('-');
            this.stayPopup.selectedLabel = this.model.stayCodeName;
          }
        });
        if (this.hasPermission('misAssistantUserExt_edit')) {
          this.disabled = false;
        } else {
          this.disabled = true;
        }

      } else {
        this.disabled = false;
        this.showClose = true;
        this.isLoaded = true;
      }
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
    watch: {

    },
    methods: {
      submit() {
        this.$refs.uForm.validate(valid => {
          if (valid) {
            uni.showLoading({
              title: '提交中....'
            })
            this.$u.api.mis.misAssistantUserExt.save(this.model).then(res => {
              uni.hideLoading();
              uni.showModal({
                title: '提示',
                content: res.msg,
                showCancel: false,
                success: function() {
                  if (res.code == 200) {
                    uni.navigateTo({
                      url: 'index'
                    });
                  }
                }
              });
            });
          } else {
            this.$u.toast('您填写的信息有误，请根据提示修正。');
          }
        });
      },
      cancel() {
        uni.navigateTo({
          url: 'index'
        });
      },
      talkTypeChange(val) {
        if (val === '2' || val === '3') {
          this.popup.multiple = true;
        } else if (val === '1') {
          this.popup.multiple = false;
        } else {
          this.popup.multiple = false;
          this.model.userList = [];
        }
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        });
      },
      change(index) {
        this.tab.current = index;
      },
      cityPopupChange(e) {
        this.cityPopup.selectedLabel = e.province.label + '-' + e.city.label + '-' + e.area.label;
        this.model.nativePlaceCode = e.province.value + '-' + e.city.value + '-' + e.area.value;
      },
      stayPopupChange(e) {
        this.stayPopup.selectedLabel = e.province.label + '-' + e.city.label + '-' + e.area.label;
        this.model.stayCode = e.province.value + '-' + e.city.value + '-' + e.area.value;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .page {
    position: relative;
    background: #F7F7F7;
  }

  .tabs {
    position: relative;
    display: flex;
    height: 88rpx;
    background: #fff;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      display: block;
      border-top: 1px solid #F7F7F7;
    }

    .tab {
      position: relative;
      width: 100%;
      line-height: 88rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 500;
      color: #999;

      &::after {
        content: '';
        position: absolute;
        bottom: 4rpx;
        left: 50%;
        display: inline-block;
        width: 32rpx;
        height: 8rpx;
        border-radius: 4rpx;
        background: transparent;
        transform: translateX(-50%);
      }

      &.active {
        font-weight: 700;
        color: #333;

        &::after {
          background: #3989FC;
        }
      }
    }
  }

  .scroll-list {
    height: calc(100vh - var(--window-top) - var(--window-bottom) - 88rpx);

    .loadmore {
      padding: 32rpx;
    }
  }
  
  .form {
    padding: 24rpx;
  }
  
  .u-form-item {
    padding: 16rpx 32rpx;
    border-radius: 8rpx;
    margin-bottom: 24rpx;
    background: #fff;
  
    &::after {
      display: none;
    }
  }
  
  .footer {
    display: flex;
    padding: 0 24rpx 32rpx;
  }
  
  .form-button {
    width: 100%;
    height: 96rpx;
    border-radius: 48rpx;
    line-height: 96rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #999;
    background: #fff;
  
    &.primary {
      color: #fff;
      background: #3989FC;
    }
  
    &+.form-button {
      margin-left: 24rpx;
    }
  }
</style>